chart.js

What is chart.js?

Chart.js is a powerful, flexible JavaScript library for creating interactive charts in web applications. It supports a wide range of chart types and is highly customizable, allowing developers to create both simple and complex visualizations with ease.

What are chart.js's main functionalities?

Line Charts

Create line charts to display data trends over time or categories. The code sample initializes a line chart with a dataset and labels for the x-axis.

new Chart(document.getElementById('line-chart'), { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May'], datasets: [{ label: 'Dataset 1', data: [0, 10, 5, 2, 20], fill: false }] }, options: { title: { display: true, text: 'Line Chart' } } });

Bar Charts

Create bar charts to compare different sets of data. The code sample sets up a bar chart with different colored bars and a y-axis that starts at zero.

new Chart(document.getElementById('bar-chart'), { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'], datasets: [{ label: 'Dataset 1', data: [12, 19, 3, 5, 2], backgroundColor: ['rgba(255, 99, 132, 0.2)'] }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } });

Pie Charts

Create pie charts to illustrate numerical proportions in a dataset. The code sample creates a pie chart with three segments, each representing a portion of the whole.

new Chart(document.getElementById('pie-chart'), { type: 'pie', data: { labels: ['Red', 'Blue', 'Yellow'], datasets: [{ data: [300, 50, 100], backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'] }] }, options: { title: { display: true, text: 'Pie Chart' } } });

Radar Charts

Create radar charts to compare multiple quantitative variables. The code sample demonstrates a radar chart that compares different activities of a person.

new Chart(document.getElementById('radar-chart'), { type: 'radar', data: { labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'], datasets: [{ label: 'Person A', data: [65, 59, 90, 81, 56, 55, 40], fill: true }] }, options: { title: { display: true, text: 'Radar Chart' } } });

Other packages similar to chart.js

highcharts

Highcharts is a charting library that offers a wide variety of chart types and is known for its high level of interactivity and customization options. It is often compared to Chart.js for its ease of use and rich feature set, but it is not free for commercial use.

d3

D3.js is a powerful data visualization library that uses SVG, HTML, and CSS. D3 is more flexible and has a steeper learning curve compared to Chart.js. It is suitable for creating complex, interactive visualizations.

echarts

ECharts is an open-source visualization library that provides an array of chart types, similar to Chart.js. It is known for its rich interactive features and support for large datasets. ECharts is often praised for its performance with large data sets.

plotly.js

Plotly.js is a high-level charting library that is built on top of d3.js and stack.gl. It is capable of producing sophisticated, interactive, web-based data visualizations. Plotly.js offers more advanced features like 3D charts and is often considered more powerful than Chart.js.

README

Simple yet flexible JavaScript charting for designers & developers

Documentation

All the links point to the new version 4 of the lib.

• Introduction
• Getting Started
• General
• Configuration
• Charts
• Axes
• Developers
• Popular Extensions
• Samples

In case you are looking for an older version of the docs, you will have to specify the specific version in the url like this: https://www.chartjs.org/docs/2.9.4/

Contributing

Instructions on building and testing Chart.js can be found in the documentation. Before submitting an issue or a pull request, please take a moment to look over the contributing guidelines first. For support, please post questions on Stack Overflow with the chart.js tag.

License

Chart.js is available under the MIT license.